{% extends 'layout/basic.html' %}
    {% load static %}
    {% block title %}
    Clock
    {% endblock %}

    {% block  content%}
     <div class="countdown">
   <span id="countdown">倒计时： {{ countdown }}</span>
         </div>
         <style>
       .countdown {
           font-size: 80px;
           color: gray;

         display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 5px dashed black;
  padding: 10px;
  width:880px;
  height: 170px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

       }



         </style>
    {% endblock %}

    {% block js %}
        <script>
        // 获取倒计时元素
        var countdownElement = document.getElementById('countdown');

        // 获取初始倒计时值
        var countdown = {{ countdown }};

        // 更新倒计时函数
        function updateCountdown() {
            // 将倒计时转换为天、小时、分钟和秒
            var days = Math.floor(countdown / (24 * 60 * 60));
            var hours = Math.floor((countdown % (24 * 60 * 60)) / (60 * 60));
            var minutes = Math.floor((countdown % (60 * 60)) / 60);
            var seconds = Math.floor(countdown % 60);

            // 更新倒计时元素的内容
            countdownElement.innerHTML = days + '天 ' + hours + '小时 ' + minutes + '分钟 ' + seconds + '秒';

            // 减少倒计时值
            countdown--;

            // 检查倒计时是否已结束
            if (countdown < 0) {
                clearInterval(interval);
                countdownElement.innerHTML = '倒计时已结束';
            }
        }

        // 每秒钟更新倒计时
        var interval = setInterval(updateCountdown, 1000);
    </script>
    {% endblock %}


{% block footer %}
<footer>
    <p>盛年不重来，一日难再晨。及时当勉励，岁月不待人。</p>
</footer>
    <style>
    footer {
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
    color: #333;
    font-size: 40px;
    border-top: 1px solid #ccc;
    margin-top: 585px;
}

    </style>

{% endblock %}







